<template>
    <div>
        <el-form ref="form" :disabled="view" :model="form" :rules="rules" label-width="160px" label-suffix="：">
            <el-row>
                <el-col :md="20">
                    <el-form-item label="标题" prop="title">
                        <el-input v-model="form.title" placeholder="请输入标题" />
                    </el-form-item>
                    <el-form-item label="描述" prop="description">
                        <el-input v-model="form.description" placeholder="请填写描述" />
                    </el-form-item>
                    <el-form-item label="跳转" prop="type">
                        <template slot-scope="">
                            <div class="box">
                                <el-select v-model="form.jump_type" placeholder="无跳转" @change="jump">
                                    <el-option label="无跳转" :value="0" />
                                    <el-option label="站内直播" :value="1" />
                                    <el-option label="站内商品" :value="2" />
                                </el-select>
                                <el-input v-if="isShow" style="margin-left: 10px;" placeholder="请输入直播ID" />
                            </div>
                        </template>
                    </el-form-item>
                    <el-form-item label="权重" prop="weigh">
                        <el-input-number v-model="form.weigh" :step="1" :min="0" step-strictly label="权重" />
                    </el-form-item>
                    <el-form-item label="封面" prop="image">
                        <ImageUpload :url.sync="form.image" :width="80" :height="80" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-show="isGoods" style="margin-left: 100px;">
                <el-col :md="20">
                    <el-table :data="goodsArr" border stripe style="width: 100%;" :default-sort="{ prop: 'date', order: 'descending' }">
                        <el-table-column label="商品信息" width="200">
                            <template slot-scope="scope">
                                <div class="goods-info">
                                    <el-image :src="scope.row.cover" :preview-src-list="[scope.row.cover]" style="width: 50px; height: 50px; margin-right: 10px;" fit="contain" />
                                    <div class="goods-info-main">
                                        <el-popover placement="top" trigger="hover" width="300" :content="scope.row.title">
                                            <div slot="reference" class="goods-title">
                                                <b>{{ scope.row.title }}</b>
                                            </div>
                                        </el-popover>
                                        <div>商品编号:{{ scope.row.number }}</div>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="shop.name" label="店铺" width="180" />
                        <el-table-column prop="brand.name" label="商家" />
                        <el-table-column prop="sale_price" label="价格" />
                        <el-table-column prop="business_classify" label="类目" />
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </el-form>
        
        <el-dialog title="添加商品" :visible.sync="dialogTableVisible">
            <selectDialog />
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogTableVisible = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import selectDialog from '@/views/live_broadcast/broadcast/components/Select/index.vue'
export default {
    components: {
        selectDialog
    },
    props: {
        id: {
            type: [Number, String],
            default: ''
        },
        view: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            isShow: false,
            isGoods: true,
            dialogTableVisible: false,
            goodsArr: this.$store.state.user.goodsArr,
            loading: false,
            categoryOptions: [],
            form: {
                id: this.id,
                description: '',
                image: '',
                jump_type: 0,
                jump_value: '',
                status: 0,
                title: '',
                weigh: 0
            },
            rules: {
                title: [{ required: true, message: '请完善信息', trigger: 'blur' }],
                image: [{ required: true, message: '请完善信息', trigger: 'blur' }]
            }
        }
    },
    mounted() {
        // 编辑
        if (this.form.id != '') {
            this.getInfo()
        }
    },
    methods: {
        jump(value) {
            if (value === 1) {
                this.isShow = true
            } else {
                this.isShow = false
            }
            if (value === 2) {
                this.dialogTableVisible = true
            } else {
                this.dialogTableVisible = false
            }
        },
        getInfo() {
            this.loading = true
            this.$api.post('banner/banner/detail', { id: this.form.id }).then(res => {
                this.loading = false
                const data = res.data.data
                // if (!data.pid) {
                //     data.pid = null // 避免为空字符串的时候，treeselect显示unknown的问题
                // }
                this.form = Object.assign(this.form, data)
            }).catch(() => {})
        },
        submit(callback) {
            if (this.form.id == '') {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        const params = this.form
                        this.$api.post('banner/banner/create', params).then(() => {
                            this.$message.success({
                                message: '新增成功',
                                center: true
                            })
                            callback && callback()
                        })
                    }
                })
            } else {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        const params = this.form
                        this.$api.post('banner/banner/update', params).then(() => {
                            this.$message.success({
                                message: '编辑成功',
                                center: true
                            })
                            callback && callback()
                        })
                    }
                })
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .box {
        display: flex;
    }
    .goods-info {
        display: flex;
        padding: 5px;
        border: 1px dashed #ececec;
        background-color: #fff;
        border-radius: 4px;
    }
    .goods-info-main {
        flex: 1;
    }
    .goods-title {
        margin-bottom: 3px;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
</style>
